<template>
  <div class="learn-page">
    <nav-bar title="学习自测" theme="white" message></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <div class="learn-search">
        <van-search
          v-model="search"
          placeholder="搜索信息"
          background="rgba(255,255,255,0)"
          clearable
          :left-icon="searchLeftIcon"
        />
      </div>
      <div class="learn-swipe">
        <van-swipe :autoplay="3000" lazy-render indicator-color="white">
          <van-swipe-item v-for="(item, key) in bannerList" :key="key">
            <img :src="$config.ImageURl + item.banner" alt />
          </van-swipe-item>
        </van-swipe>
        <div class="learn-swipe-shadow"></div>
      </div>
      <van-row class="learn-entry">
        <van-col span="6" @click="$router.push(item.path)" v-for="(item, key) in entryBar" align="center" :key="key">
          <div class="learn-entry-item">
            <img class="learn-entry-img" :src="item.iconPath" alt="" />
            <p class="learn-entry-text">{{ item.text }}</p>
          </div>
        </van-col>
      </van-row>
      <div class="learn-course">
        <p class="learn-course-title">最新课程</p>
        <van-row :gutter="14">
          <van-col span="12" v-for="(item, key) in courseList" :key="key">
            <div class="learn-course-item" @click="clickCourse(item)">
              <van-image width="100%" height="100" :src="$config.ImageURl + item.banner" radius="8" />
              <p class="learn-course-item--text van-multi-ellipsis--l2">{{ item.subjectName }}</p>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>
<script>
import learnTest from '@/api/learnTest'
export default {
  data() {
    return {
      searchLeftIcon: require('@/assets/images/basic/searchbar_search@2x.png'),
      search: '',
      entryBar: [
        {
          text: '课程学习',
          iconPath: require('@/assets/images/learnTest/entry_course@2x.png'),
          path: '/learnTest/course?flagNumber=1'
        },
        {
          text: '题库练习',
          iconPath: require('@/assets/images/learnTest/entry_question@2x.png'),
          path: '/learnTest/questionBank'
        },
        {
          text: '在线考试',
          iconPath: require('@/assets/images/learnTest/entry_exam@2x.png'),
          path: '/learnTest/exam?type=0'
        },
        {
          text: '我的学习',
          iconPath: require('@/assets/images/learnTest/entry_my_study@2x.png'),
          path: '/learnTest/my'
        }
      ],
      courseList: [], // 最新课程列表
      images: [
        require('@/assets/images/learnTest/banner/banner@2x.jpg'),
        require('@/assets/images/learnTest/banner/banner1@2x.jpg'),
        require('@/assets/images/learnTest/banner/banner2@2x.png'),
        require('@/assets/images/learnTest/banner/banner3@2x.png')
      ],
      bannerList: []
    }
  },
  computed: {},
  created() {
    this.getBannerList()
    this.bannerLists()
  },
  methods: {
    // 最新课程列表
    getBannerList() {
      const data = {
        subjectTypeCode: '',
        subjectName: '',
        recordSize: 0,
        pageSize: 10,
        learnedType: 1
      }
      learnTest.Course.courseList(data).then(res => {
        if (res.data.status === 0 && res.data.data) {
          this.courseList = res.data.data.list
        }
      })
    },
    // banner列表
    bannerLists() {
      learnTest.Course.bannerList().then(res => {
        if (res.data.status === 0 && res.data.data) {
          this.bannerList = res.data.data
        }
      })
    },
    // 查看课程简介
    clickCourse(item) {
      this.$router.push({
        path: '/learnTest/course/introduce',
        query: { subjectCode: item.subjectCode, flagNumber: '1' }
      })
    },
    onSearch() {
      console.log('onSearch')
    },
    onCancel() {
      console.log('onCancel')
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/learnTest/index.less';
</style>
